<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>09.bootstrap的分页组件</title>
        <link rel="stylesheet" href="static/css/bootstrap.css">
        <script src="static/js/bootstrap.js"></script>
    </head>
    <body>
        <div class="container">
            <ul class="nav nav-tabs">
                <li class="active"><a href="">国语</a></li>
                <li><a href="">数学</a></li>
                <li><a href="">英语</a></li>
            </ul>
            <br/><br/>
            <hr/>
            <!-- 胶囊式导航 -->
            <ul class="nav nav-pills">
                <li class="active"><a href="">国语</a></li>
                <li><a href="">数学</a></li>
                <li><a href="">英语</a></li>
            </ul>


            <!-- 分页 -->
            <div class="row">
                <!-- <nav aria-label="分页器"> -->
                <nav>
                    <ul class="pagination">
                        <li>
                            <a href="#">
                                <span>&laquo;</span>
                            </a>
                        </li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">6</a></li>
                        <li class="active"><a href="#">7</a></li>
                        <li><a href="#">8</a></li>
                        <li><a href="#">9</a></li>
                        <li>
                            <a href="#">
                                <span>&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>

            <!-- 简单分页, aria-label要不要都可以，aria-label是给盲人用的 -->
            <!-- <nav aria-label="nav"> -->
            <nav>
                <ul class="pager">
                    <li><a href=""><span class="glyphicon glyphicon-arrow-left"></span> previous </a></li>
                    <li><a href=""> next <span class="glyphicon glyphicon-arrow-right"></span> </a></li>
                </ul>
            </nav>


            <!-- 禁用与激活, aria-xxx都去掉，是给盲人用的，暂时不用管 -->
            <nav>
                <ul class="pagination">
                    <li>
                        <a href="#">
                            <span>&laquo;</span>
                        </a>
                    </li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li class="disabled"><a href="#">3</a></li>
                    <li class="active"><a href="#">4</a></li>
                    <li><a href="#">8</a></li>
                    <li>
                        <a href="#">
                            <span>&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>

            <!-- 分页主要是nav +ul， class=pagination, li之中是链接, pagination可以设置尺寸  -->
            <nav>
                <ul class="pagination pagination-sm">
                    <li><a href="">0</a> </li>
                    <li><a href="">1</a> </li>
                    <li><a href="">2</a> </li>
                </ul>
            </nav>

            <!-- 两边对齐，主要是由于li之中的previous, next的class样式决定的 -->
            <nav>
                <ul class="pager">
                    <li class="previous"><a href="#"><span>&larr;</span> 上一页</a></li>
                    <li><a href="#"> 当前页</a></li>
                    <li class="next"><a href="#">下一页 <span>&rarr;</span></a></li>
                </ul>
            </nav>
        </div>
    </body>
</html>

